<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<!DOCTYPE html>
<html>

<base class="_dcdev_preset_" href="https://res.dcdev.net/" />

<head>
    <!------ 以下内容不要动 --------------------------------------------------------->
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 数控开发基础样式库（已作一定的自适应，button/label/input/textarea等设置了默认样式） -->
    <link class="_dcdev_preset_" type="text/css" rel="stylesheet"
        href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/dcdevui.css">
    <!-- 页面标题 -->
    <title>数控开发 · 预览代码片段</title> <!-- 桌面端浏览器及收藏夹图标 -->
    <link class="_dcdev_preset_" rel="icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <link class="_dcdev_preset_" rel="shortcut icon" href="https://www.dcdev.net/icon.png" type="image/x-icon">
    <!-- <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.3/components/image/cropper.css"> -->
    <link type="text/css" rel="stylesheet" href="https://res.dcdev.net/dcdev/v1.0.6/assets/css/cropper.min.css">
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css" media="all">
    <!------ 以上内容不要动 --------------------------------------------------------->


</head>

<body>
    <!------ dcdev_body_container不要删除,内容在 body start 及 body end 中间书写  ------>
    <div class="dcdev-body-container" id="dcdev_body_container" style="display: none;">
        <!-- body start -->
        <button onclick="abc()"></button>
        <img id="temp">
        <!-- body end -->
    </div>
</body>

<!------ 以下内容不要变动 --------------------------------------------------------->
<script class="_dcdev_preset_" src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!-- 不授权模式， 仅初始化常用变量及函数 -->
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/init.js" id="initClass"
    authorize_mode="none" console_mode=""></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/assets/js/ui.js" id="ui_class"
    xhr_show_loading=1></script>
<script class="_dcdev_preset_" src="https://res.dcdev.net/dcdev/v1.0.6/func/import_dev_kit.js"></script>
<script class="_dcdev_preset_">
    // 代码片段描述
    code_part_desc = "1111";
    code_part_id = "b59c67bf196a4758";
</script>
<!------ 以上内容不要变动 --------------------------------------------------------->

<script src="https://cdn.bootcss.com/cropper/4.0.0-beta/cropper.js"></script>
<script>
    function abc() {
        // $.getScript("https://www.dcdev.net/lib/lib_of_front_end/dcdev/v1.0.6/assets/js/crop_image.js", function () {
        $.getScript("http://127.0.0.1:8080/lib/lib_of_front_end/dcdev/v1.0.6/assets/js/crop_image.js", function () {
            var data = {
                // 是否自动选择图片
                autoSelectImg: true,
                //canvas（图片）相关
                movable: true, //类型,//Boolean，默认值true。是否允许移动图片
                rotatable: true, //类型,//Boolean，默认值true。是否允许旋转图片。
                // scalable: true,//  默认 true 。 是否允许扩展图片。（暂时不知道干嘛用）
                zoomable: true, // 默认true, 是否允许缩放图片。
                zoomOnWheel: true, // 默认 true 是否允许鼠标滚轴 缩放图片
                zoomOnTouch: true, // 默认true 是否允许触摸缩放图片（触摸屏上两手指操作。）
                //限制最大宽高
                maxwidth: 500,
                maxheight: 500,
                //crop(裁剪框)相关
                aspectRatio: 1 / 1, //裁剪框比例  默认NaN   例如:: 1 / 1,//裁剪框比例 1:1
                modal: true, //类型:Boolean，默认值true。是否在剪裁框上显示黑色的模态窗口。
                cropBoxMovable: true, //默认true ,是否允许拖动裁剪框cropBoxResizable :默认 true,//是否允许拖动 改变裁剪框大小
                autoCrop: true, //类型:Boolean，默认值true。是否允许在初始化时自动出现裁剪框。autoCropArea:类型:Number，默认值0.8（图片的80%）。0-1之间的数值，定义自动剪裁框的大小。highlight:类型:Boolean，默认值true。是否在剪裁框上显示白色的模态窗口。
                guides: true, //类型:Boolean，默认值true。是否在剪裁框上显示虚线。
                center: true, // 默认true  是否显示裁剪框 中间的+ 
                cropBoxResizable: true, //是否允许改变裁剪框的大小
                imageInfo: function (res) {    //返回所选图片的信息回调
                    debugger;
                }

            };
            crop_image.crop(data, function (res) {
                console.log(res)
                debugger;
            })
        })
    }
    abc();
    layui.use(['element', 'form', "table", "layer", "colorpicker"], function () {
        form = layui.form;
        table = layui.table;
        element = layui.element;
    })

</script>

</html>